<template>
	<view class="container">
		<view class="cont_box">
			<view class="title">
				帮助我们改进产品体验
			</view>
			<view class="desc">
				请详细描述您遇到的问题，上传截图可帮助我们更快解决
			</view>
			<view class="title">
				上传图片或截图（可选）
			</view>
			<view class="upload" @click="uploadimg">
				<view class="iconfont icon-tianjiatupian">
				</view>
				<view class="upload_title" style="font-size: 28rpx;">
					点击上传图片或拖拽图片至此处
				</view>
				<view class="upload_desc">
					支持JPG,PNG格式,最多3张,单张不超过5MB
				</view>
			</view>
			<view class="img">
				<view class="imgitem" v-for="(item,index) in selectimg" :key="index">
					  <u--image
					    :showLoading="true"
					    :src="item"
					    width="80px"
					    height="80px"
					  ></u--image>
					  <view class="del" @click="delfn(index)">
					  	×
					  </view>
				</view>
			</view>
			<view class="title">
				问题描述（必填）
			</view>
			<view class="">
				<u--textarea v-model="textvalue" maxlength='200' autoHeight border='surround' placeholder="请输入问题描述"
					count></u--textarea>
			</view>
			<view class="submit_sub" @click="submit">
				提交反馈
			</view>
			<view class="tipe">
				提交即标识您同意我们的
				<span class="tipe_span">隐私政策</span>
				和
				<span class="tipe_span">服务条款</span>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				textvalue: '',
				selectimg: [], //图片集合
			};
		},
		components: {},
		onload() {

		},
		mounted() {

		},
		watch: {

		},
		methods: {
			submit(){
				const data={
					content:this.textvalue,
					imgUrl:this.selectimg.join(',')
				}
				this.$request(`/feedBack/add`, 'post',data).then(
					res => {
						console.log(res);
						if(res.data.data){
							uni.showModal({
								title: '提示',
								content: '提交问题反馈成功',
								showCancel: false,
								success: function(res) {
									uni.navigateBack({
										delta: 1
									});
								}
							});
						}
					})
			},
			delfn(e){
				this.selectimg.splice(e,1)
			},
			//上传图片uploadimg
			uploadimg() {
				const that = this
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sizeType: ['compressed'],
					success: (res) => {
						const mbsizee = 5 * 1024 * 1024
						if (res.tempFiles[0].size > mbsizee) {
							uni.showModal({
								title: '提示',
								content: '图片过大，请上传5MB以内的图片',
								showCancel: false,
								success: function(res) {
									return
								}
							});
							return
						}
						if (that.selectimg.length == 3) {
							uni.showModal({
								title: '提示',
								content: '最大上传3张图片',
								showCancel: false,
								success: function(res) {
									return
								}
							});
							return
						}
						that.$uploadimg(res.tempFiles[0].tempFilePath,'/upload/image')
							.then((url) => {
								that.selectimg.push(
									url
								)
							})
							.catch((err) => {
								console.error(err);
							});
					}
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	// 主题色变量
	$primary-color: #f97316;
	$primary-light: rgba(249, 66, 34, 0.1);
	$primary-dark: rgba(249, 66, 34, 0.8);
	$border-color: #e5e7eb;
	$text-primary: #1f2937;
	$text-secondary: #6b7280;
	$background-light: #f9fafb;
	$border-radius: 12px;
	$border-radius-sm: 8px;

	.container {
		padding: 15px;
		height: calc(100vh - 30px);
		overflow: auto;
		background-color: $background-light;

		.cont_box {
			padding: 24px;
			background-color: #fff;
			border-radius: $border-radius;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
			transition: box-shadow 0.3s ease;
		}

		.title {
			font-size: 30rpx;
			font-weight: 700;
			color: $text-primary;
			margin-top: 8px;
			letter-spacing: 0.5px;
		}

		.title:first-child {
			margin-top: 0;
		}

		.desc {
			font-size: 28rpx;
			color: $text-secondary;
			margin: 12px 0 20px;
			line-height: 1.6;
			letter-spacing: 0.3px;
		}

		.upload {
			margin: 16px 0 20px;
			border: 2px dashed $border-color;
			border-radius: $border-radius;
			height: 160px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			transition: all 0.3s ease;
			cursor: pointer;
			position: relative;
			overflow: hidden;

			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: -100%;
				width: 100%;
				height: 100%;
				background: linear-gradient(90deg, transparent, rgba(249, 66, 34, 0.05), transparent);
				transition: all 0.6s ease;
			}

			&:hover {
				border-color: $primary-color;
				background-color: rgba(249, 66, 34, 0.03);

				&::before {
					left: 100%;
				}
			}

			.icon-tianjiatupian {
				font-size: 80rpx;
				color: $primary-color;
				margin-bottom: 8px;
				transition: transform 0.3s ease;

				.upload:hover & {
					transform: scale(1.1);
				}
			}

			.upload_title {
				font-size: 32rpx;
				font-weight: 600;
				color: $text-primary;
				margin-bottom: 6px;
			}

			.upload_desc {
				font-size: 24rpx;
				color: $text-secondary;
				text-align: center;
			}
		}

		::v-deep .u-textarea {
			border: 1px solid $border-color;
			border-radius: $border-radius;
			margin: 16px 0;
			transition: border-color 0.3s ease, box-shadow 0.3s ease;

			&:focus-within {
				border-color: $primary-color;
				box-shadow: 0 0 0 3px rgba(249, 66, 34, 0.1);
			}
		}

		.submit_sub {
			margin-top: 32px;
			height: 56px;
			background: linear-gradient(135deg, $primary-color, #f96432);
			line-height: 56px;
			border-radius: $border-radius;
			text-align: center;
			font-weight: 700;
			color: #fff;
			font-size: 32rpx;
			letter-spacing: 1px;
			cursor: pointer;
			transition: all 0.3s ease;
			position: relative;
			overflow: hidden;
			box-shadow: 0 4px 12px rgba(249, 66, 34, 0.2);

			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: -100%;
				width: 100%;
				height: 100%;
				background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
				transition: all 0.6s ease;
			}

			&:hover {
				transform: translateY(-2px);
				box-shadow: 0 6px 20px rgba(249, 66, 34, 0.3);

				&::before {
					left: 100%;
				}
			}

			&:active {
				transform: translateY(0);
			}
		}

		.tipe {
			margin-top: 20px;
			text-align: center;
			font-size: 24rpx;
			color: $text-secondary;
			line-height: 1.5;

			.tipe_span {
				color: $primary-color;
				font-weight: 500;
				text-decoration: underline;
				cursor: pointer;
				transition: color 0.3s ease;

				&:hover {
					color: $primary-dark;
				}
			}
		}

		::v-deep .u-textarea {
			padding-bottom: 20px !important;
			min-height: 120px;
		}

		.img {
			display: flex;
			flex-wrap: wrap;
			margin: 16px 0 24px;

			.imgitem {
				margin-right: 12px;
				margin-bottom: 12px;
				position: relative;
				border-radius: $border-radius-sm;
				overflow: hidden;
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
				transition: transform 0.3s ease, box-shadow 0.3s ease;

				&:hover {
					transform: translateY(-2px);
					box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
				}

				.u--image {
					border-radius: $border-radius-sm;
					overflow: hidden;
				}

				.del {
					position: absolute;
					top: 0;
					right: 0;
					color: #fff;
					font-size: 28rpx;
					font-weight: 700;
					height: 24px;
					width: 24px;
					line-height: 24px;
					text-align: center;
					background-color: $primary-color;
					border-radius: 0 0 0 8px;
					cursor: pointer;
					transition: all 0.3s ease;

					&:hover {
						background-color: #d92d12;
						transform: scale(1.1);
					}
				}
			}
		}
	}
</style>